<template>
  <el-row :gutter="8">
    <el-col :span="4">
      <el-tree :data="treeData" :props="{ value: 'branchId',label: 'groupName', children: 'children'}" @node-click="handleNodeClick"
               highlight-current default-expand-all :expand-on-click-node="false"></el-tree>
    </el-col>
    <el-col :span="20">
      <user-table :branch-info="selectGroup"></user-table>
    </el-col>
  </el-row>
</template>

<script>
import UserTable from "@/views/system/user/UserTable";
export default {
  name: "GroupUser",
  components: {UserTable},
  data(){
    return {
      treeData: [],
      selectGroup: {}
    }
  },
  created() {
    this.loadGroupTree()
  },
  methods: {
    loadGroupTree(){
      this.treeData.splice(0, this.treeData.length)
      this.$get('/group/selfTree')
      .then(res => {
        this.$resultMsg(this, res, true)
        if (res.code === 200 && res.data) {
          this.treeData.push(res.data)
          this.selectGroup = res.data
        }
      })
    },
    handleNodeClick(data) {
      this.selectGroup = data
    }
  }
}
</script>

<style scoped>

</style>
